<template>
  <view class="store-page">
    <view class="top-box1">
      <view class="nav-bar" :style="{ height: navBarHeight }">
        <view
          class="navbar-title"
          :style="{ 'padding-top': statusBarHeight + 'px' }"
        >
          <image
            @click="barnk()"
            class="return"
            src="/static/images/return.png"
          ></image>
          <view class="navbar-name">会员中心</view>
          <view></view>
        </view>
      </view>
    </view>
    <view class="content" v-if="memberUserInfo">
      <view class="title" v-if="memberUserInfo.memberAgencyLevel != 0">
        <view class="title1" @click="change">
          <view :class="isVip ? 'title-name' : 'title-name1'">会员</view>
          <view :class="isVip ? 'line' : ''"></view>
        </view>
        <view class="title1" @click="change">
          <view :class="!isVip ? 'title-name' : 'title-name1'">身份</view>
          <view :class="!isVip ? 'line' : ''"></view>
        </view>
      </view>
      <view class="flex" :style="{ marginBottom: isVip ? '0' : '52rpx' }">
        <image class="logo" :src="userInfo.avatar"></image>
        <view>
          <view class="name">{{ userInfo.nickName }}</view>
          <template v-if="isVip">
            <template v-if="memberUserInfo.memberLevel == 0">
              <view class="msg">您当前还不是VIP会员</view>
            </template>
            <template v-else>
              <view class="msg" v-if="memberUserInfo.memberLevel == 1"
                >您当前是VIP会员</view
              >
              <view class="msg" v-if="memberUserInfo.memberLevel == 2"
                >您当前是SVIP会员</view
              >
            </template>
          </template>
          <template v-else>
            <!-- 3-共享店主 4-联创 5-区域运营 6-总裁 -->
            <template v-if="memberUserInfo.memberAgencyLevel != 0">
              <view class="msg"
                >您当前身份是{{ memberUserInfo.memberAgencyLevelName }}</view
              >
            </template>
          </template>
        </view>
      </view>
      <template v-if="isVip">
        <!-- 普通用户 -->
        <view class="card-wrap" v-if="memberUserInfo.memberLevel == 0">
          <image
            class="card-bg"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/default-card_20250107181458A006.png'
            "
          ></image>
          <image
            class="card-img"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/default-img_20250107181550A007.png'
            "
          ></image>
          <view class="card-text">
            <view>普通用户</view>
          </view>
        </view>
        <!-- vip/svip -->
        <view class="card-wrap" style="padding: 0 20rpx" v-else>
          <image
            class="card-bg"
            style="height: 250rpx"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/vip-card_20250107181856A014.png'
            "
          ></image>
          <image
            class="card-img"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/vip-img_20250107181917A015.png'
            "
          ></image>
          <view class="card-text">
            <view style="margin-bottom: 10rpx">{{
              memberUserInfo.memberLevel == 1 ? "VIP会员" : "SVIP会员"
            }}</view>
            <view
              >{{
                memberUserInfo.updateTime || memberUserInfo.createTime
              }}升级为{{
                memberUserInfo.memberLevel == 1 ? "VIP会员" : "SVIP会员"
              }}</view
            >
          </view>
        </view>
      </template>
      <template v-if="!isVip">
        <!-- 共享店主 -->
        <view class="card-wrap" v-if="memberUserInfo.memberAgencyLevel == 3">
          <image
            class="card-bg"
            style="height: 320rpx"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/shopkeeper-card_20250107181813A012.png'
            "
          ></image>
          <image
            class="card-img"
            style="width: 292rpx; height: 292rpx; top: 40rpx; right: 0"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/shopkeeper-img_20250107181839A013.png'
            "
          ></image>
          <view class="card-text">
            <view style="margin-bottom: 20rpx 0 10rpx; color: #a6721b"
              >共享店主</view
            >
            <view style="color: #a6721b"
              >{{
                memberUserInfo.updateTime || memberUserInfo.createTime
              }}升级为共享店主</view
            >
          </view>
        </view>
        <!-- 联创 -->
        <view class="card-wrap" v-if="memberUserInfo.memberAgencyLevel == 4">
          <image
            class="card-bg"
            style="height: 320rpx"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/joint-card_20250107181636A008.png'
            "
          ></image>
          <image
            class="card-img"
            style="width: 292rpx; height: 292rpx; top: 40rpx; right: 0"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/joint-img_20250107181703A009.png'
            "
          ></image>
          <view class="card-text">
            <view style="margin-bottom: 20rpx 0 10rpx; color: #a05812"
              >联创</view
            >
            <view style="color: #a05812"
              >{{
                memberUserInfo.updateTime || memberUserInfo.createTime
              }}升级为联创</view
            >
          </view>
        </view>
        <!-- 区域运营中心 -->
        <view class="card-wrap" v-if="memberUserInfo.memberAgencyLevel == 5">
          <image
            class="card-bg"
            style="height: 320rpx"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/area-card_20250107175905A003.png'
            "
          ></image>
          <image
            class="card-img"
            style="width: 292rpx; height: 292rpx; top: 40rpx; right: 0"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/area-img_20250107181407A005.png'
            "
          ></image>
          <view class="card-text">
            <view style="margin-bottom: 20rpx 0 10rpx; color: #503eef"
              >区域运营中心</view
            >
            <view style="color: #503eef"
              >{{
                memberUserInfo.updateTime || memberUserInfo.createTime
              }}升级为区域运营</view
            >
          </view>
        </view>
        <!-- 总裁 -->
        <view class="card-wrap" v-if="memberUserInfo.memberAgencyLevel == 6">
          <image
            class="card-bg"
            style="height: 320rpx"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/president-card_20250107181719A010.png'
            "
          ></image>
          <image
            class="card-img"
            style="width: 292rpx; height: 292rpx; top: 40rpx; right: 0"
            :src="
              baseImgUrl +
              'profile/upload/2025/01/07/president-img_20250107181749A011.png'
            "
          ></image>
          <view class="card-text">
            <view style="margin: 20rpx 0 10rpx; color: #dd1313">总裁</view>
            <view style="color: #dd1313"
              >{{
                memberUserInfo.updateTime || memberUserInfo.createTime
              }}升级为总裁</view
            >
          </view>
        </view>
      </template>
      <view class="copywriting">
<!--        <view class="copywriting-title">{{
          isVip ? "会员特权" : "身份说明"
        }}</view> -->
<!--        <view class="copywriting-content mt-40"
          >消息一出，瞬间引爆互联网，分分钟登顶Hacker
          News。假如这次发现为真，那么我们就能实现无损的能量传输，全球的能耗问题将从源头上解决，人类能利用电能获得巨大的力量。消息一出，瞬间引爆互联网，分分钟登顶Hacker
          News。假如这次发现为真，那么我们就能实现无损的能量传输，全球的能耗问题将从源头上解决，人类能利用电能获得巨大的力量。</view
        > -->
		
		<!-- <view class="copywriting-content mt-40" v-html="content"></view> -->
      </view>
      <view class="btn">
        <view
          class="button"
          v-if="isVip && memberUserInfo.memberLevel <= 0"
          @click="toBuyVip"
          >购买VIP礼包升级</view
        >
<!--        <view
          class="button"
          v-if="!isVip && memberUserInfo.memberAgencyLevel < 6"
          @click="toUpgrade"
          >完成任务升级</view
        > -->
        <view
          v-if="isVip && memberUserInfo.memberLevel < 2"
          :style="{
            color: memberUserInfo.memberLevel == 0 ? '#FF4254' : '#000',
          }"
          style="font-size: 24rpx"
          >开通会员代表接受《付费会员服务协议》</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import userApi from "@/api/user";
import { baseImgUrl } from "@/config";

export default {
  name: "Store",
  data() {
    return {
      baseImgUrl,
      navBarHeight: "",
      statusBarHeight: 0,
      isVip: true,
      system: [],
      menu: [],
      statusBarHeight: 0, //状态栏的高度
      navigatorHeight: 0, //导航栏高度
      menuHeight: 0, //胶囊高度
      menuTop: 0, //胶囊与顶部的距离
      totalHeight: 0, //总高度
      userInfo: {},
      memberUserInfo: null,
      userInfo: null,
	  content:''
    };
  },

  async onLoad() {
    this.navBarHeight = this.$store.getters.heightData.navBarHeight + "px";

    //获取系统信息
    uni.getSystemInfo({
      success: (res) => {
        this.system = res;
      },
    });

    //获取胶囊信息
    this.menu = uni.getMenuButtonBoundingClientRect();

    //计算组件高度
    this.statusBarHeight = this.system.statusBarHeight; //状态栏高度
    this.menuHeight = this.menu.height; //胶囊高度
    this.statusBarHeight = this.menu.top; //胶囊与顶部的距离

    this.getUserInfo();
    this.contentList();
	
  },
  async onShow() {},
  methods: {
    // 获取用户信息
    getUserInfo() {
      let userInfo = uni.getStorageSync("userInfo");
      userApi.fetchUserInfo().then((res) => {
        if (res.code == 200) {
          this.userInfo = res.user;
          this.memberUserInfo = res.memberUserInfo;
          uni.setStorageSync("userInfo", {
            ...userInfo,
            nickName: res.user.nickName,
            avatar: res.user.avatar,
            memberLevel: res.memberUserInfo.memberLevel,
            agencyLevel: res.memberUserInfo.memberAgencyLevel,
            phone: res.user.phonenumber,
            payPassword: res.user.payPassword, // 是否设置过支付密码
            parentNickName: res.bdmUser.parentNickName, // 绑定的上级用户名
          });
        }
      });
    },
	
	// 获取用户信息

	contentList() {
	  userApi.getContent({pageNum:1,pageSize:99}).then((res) => {
	    if (res.code == 200) {
			
			res.rows.forEach(function(element) {
				if (element.type == 1) {
					this.content = element.content
				}
			}, this);
				}
	  });
	},
	
    toBuyVip() {
      uni.redirectTo({
        url: `/subPages/details/productList?id=${4}`,
      });
    },
    toUpgrade() {
      uni.redirectTo({
        url: `/subPages/details/productList?id=${4}`,
      });
    },
    change() {
      this.isVip = !this.isVip;
    },
    barnk() {
      uni.navigateBack({
        delta: 1, // delta值为1时表示返回的页面层数
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top-box {
  background-image: url("https://rb.biomedical-wh.com/prod-api/profile/bdm_img/my_bg_1.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.top-box1 {
  background: #fff3f6;
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
}

.top-box1 {
  background: #f1f6ff;
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
}

.content {
  background: #f1f6ff;
  height: 100vh;
}

.title {
  display: flex;
  justify-content: space-between;
}

.title1 {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6rpx;
}

.line {
  width: 20rpx;
  height: 4rpx;
  background: #000;
}

.title-name {
  color: #000000;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 40rpx;
  opacity: 0.9;
}

.title-name1 {
  color: #000000;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 40rpx;
  opacity: 0.5;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.logo {
  width: 100rpx;
  height: 100rpx;
  //   background: #000;
  border-radius: 50%;
  margin-left: 28rpx;
  margin-right: 20rpx;
}

.flex {
  display: flex;
  padding-top: 40rpx;
}

.name {
  color: #4b3138;
  font-family: "PingFang SC";
  font-size: 36rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.mt-40 {
  margin-top: 40rpx;
}

.msg {
  color: #4b3138;
  font-family: "PingFang SC";
  font-size: 26rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
  margin-top: 10rpx;
}

.card-wrap {
  width: 100%;
  position: relative;
  box-sizing: border-box;

  .card-bg {
    width: 100%;
    height: 280rpx;
    margin-top: 52rpx;
    margin-bottom: 60rpx;
  }

  .card-img {
    position: absolute;
    width: 188rpx;
    height: 180rpx;
    top: -8rpx;
    right: 62rpx;
  }

  .card-text {
    position: absolute;
    top: 80rpx;
    left: 60rpx;

    view {
      color: #fff;
    }

    view:first-child {
      font-size: 44rpx;
      font-weight: 600;
    }
  }
}

.copywriting {
  margin: 0 34rpx;
}

.copywriting-title {
  color: #4b3138;
  font-family: "PingFang SC";
  font-size: 34rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.copywriting-content {
  width: 682rpx;
  color: #000000;
  text-align: justify;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 44rpx;
  opacity: 0.9;
}

.btn {
  position: fixed;
  bottom: 67rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 694rpx;
  height: 88rpx;
  flex-shrink: 0;

  border-radius: 12rpx;
  background: var(--ff-4254, #ff4254);
  color: #ffffff;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 30rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 20rpx 0;
}

.btn-text {
  color: #000000;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
}

// .btn-text1 {
//   color: #ff4254;
//   text-align: center;
//   font-family: "PingFang SC";
//   font-size: 28rpx;
//   font-style: normal;
//   font-weight: 400;
//   line-height: 40rpx;
// }

.return {
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
}
.navbar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar-name {
  color: #222222;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 36rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.9;
  margin-left: -20rpx;
}
</style>
